<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    .nav{
        margin-top: 20px;
    }
    a{
       margin-left: 20px;
       width: 40px;
       height: 20px;
       text-align: center;
       line-height: 20px;
       color: black; 
       border: 1px solid gray;
       text-decoration: none;
    }
     .nav.active{
        background-color: red;
    }
</style>

<body>
    <div class="nav">
        <a href="#/video" class="active">视频</a>
        <a href="#/play">直播</a>
    </div>
    <div class="content">

    </div>
</body>

</html>
<script>
    window.onhashchange = function () {
        // console.log(location.hash);
        switch (location.hash) {
            case '#/video': video_page(); break;
            case '#/play': play_page(); break;
        }
        var a = document.querySelectorAll('a');
        var ul = document.querySelectorAll('ul');
        for (var i = 0; i < a.length; i++) {
        a[i].dataset.index = i
        a[i].onclick = function () {
            // 先清除所有人的active
            for (var j = 0; j < a.length; j++) {
                a[j].classList.remove('active')
                ul[j].classList.remove('active')
            }
            // 添加
            this.classList.add('active')
            // 给按钮对应的盒子添加active类名  首先需要获取到点的这个按钮的索引值
            // 点的这个按钮用this表示,得到this的索引值
            var index = this.dataset.index
            // index就是第几个按钮,只需要给第几个盒子加active类名
            ul[index].classList.add('active')

        }
    }
    }
    
    //渲染视频的列表
    function video_page() {
        document.querySelector('.content').innerHTML = `<ul class="active">
            <li>恋情曝光，李小璐带小鲜肉路旁摆拍</li>
            <li>被老外退货的8位明星，宁静惨遭家暴</li>
            <li>恋情曝光，李小璐带小鲜肉路旁摆拍</li>
            <li>被老外退货的8位明星，宁静惨遭家暴</li>
            <li>恋情曝光，李小璐带小鲜肉路旁摆拍</li>
            <li>被老外退货的8位明星，宁静惨遭家暴</li>
        </ul>`;
    }
    //渲染直播的列表
    function play_page() {
        document.querySelector('.content').innerHTML = `<ul>
            <li>直播 | 全球快递"云监工"</li>
            <li>直播 | 立冬拥抱暖阳</li>
            <li>直播 | 全球快递"云监工"</li>
            <li>直播 | 立冬拥抱暖阳</li>
            <li>直播 | 全球快递"云监工"</li>
            <li>直播 | 立冬拥抱暖阳</li>
        </ul>`;
    }
</script>
</script>